<template>
  <div class="all" >
    <div class="all-header items-c ">
      <a  class="home-ion" @click="er">
        <svg class="icon home-linkIco" aria-hidden="true">
          <use xlink:href="#icon-saoma1"></use>
        </svg>
      </a>
      <label for="" class="home-input d-flex items-c" @click="$router.push('/search')"><i class="iconfont icon-fangdajing1 p-l f-12" style="color:#fff;font-size:0.12rem">药品名/供应商/厂家</i></label>
      <a  class="home-ion" @click="$router.push('/cart')">
        <svg class="icon home-linkIco" aria-hidden="true">
          <use xlink:href="#icon-icon22fuzhi"></use>
        </svg>
      </a>
      <a  class="home-ion"  @click="flag1=!flag1">
        <svg class="icon home-linkIco" aria-hidden="true">
          <use xlink:href="#icon-menu2"></use>
        </svg>
      </a>
    </div>
    <div class="all-nav " >
      <li
       v-for='(item,i) of navlist'
       :key='i'
        :class="{active:flag===i}"
        @click="to(i)">{{item}}</li>
    </div>
    <div style="overflow:auto;height:5.8rem" id="haha">
    <div class="all-main">
      <swiper :options="swiperOption">
        <swiper-slide >
          <img class="w-100" src="http://imgstaticcdnjp1.cmcmall.cn/pagedesign/20180530_361dd7654cf8429692403286391b0794.jpg@75q.webp#cmcmall-2c-pagedesign" alt />
        </swiper-slide>
        <swiper-slide >
          <img class="w-100" src="http://imgstaticcdnjp1.cmcmall.cn/pagedesign/20190412_337f9c807c9a43dfa435d96844a30c2e.jpg@75q.webp#cmcmall-2c-pagedesign" alt />
        </swiper-slide>
        <swiper-slide >
          <img class="w-100" src="http://imgstaticcdnjp1.cmcmall.cn/pagedesign/20180530_ca555d5c100a4119995aac987e6c511b.jpg@75q.webp#cmcmall-2c-pagedesign" alt />
        </swiper-slide>
        <swiper-slide >
          <img class="w-100" src="http://imgstaticcdnjp1.cmcmall.cn/pagedesign/20180530_9be1e62b245645af89c63e2d29dbed37.jpg@75q.webp#cmcmall-2c-pagedesign" alt />
        </swiper-slide>
        <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
      </swiper>
      <div class="nav-icon">
        <router-link tag="div" to="/kind">
          <div class="div-icon div-icon1">
            <div class="iconfont icon-leimupinleifenleileibie"></div>
          </div>
          <span>分类</span>
        </router-link>
        <router-link tag="div" to="/order/all">
         <div class="div-icon div-icon2">
            <div class="iconfont icon-jinhangzhong1"></div>
         </div>
          <span>订单</span>
        </router-link>
        <router-link tag="div" to="/cart">
          <div class="div-icon div-icon3">
              <div class="iconfont icon-caigou"></div>
          </div>
          <span>采购计划</span>
        </router-link>
        <router-link tag="div" to="/user">
          <div class="div-icon div-icon4">
            <div class="iconfont icon-renwu"></div>
          </div>
          <span>我的</span>
        </router-link>
        <router-link tag="div" to="/wallet">
          <div class="div-icon div-icon5">
             <div class="iconfont icon-tuikuan"></div>
          </div>
          <span>钱包</span>
        </router-link>
      </div>
    </div>
    <div class="p-t d-flex ">
      <div style="display:inline-block;text-align:right;height:100%" class="m-b p-b f-18 p-all">华药<i class="" style="font-famlily:DFKai-SB;color:#fff;background:#36bc7c">头条</i></div>
      <div style="display:inline-block;width:2.5rem;padding-left:-0.2rem"><van-notice-bar
  text="华药电商与平安万家医疗达成战略合作,华药电商荣获“2017年度江苏省电子商务领域放心消费创建示范单位"
  background="#fff"
  color='#327372'
/></div>
    </div>
    <div class="d-flex ImgYY">
         <div class="">
           <img src="http://wxb.cmcmall.com.cn/resources/home/brand-ttl01-fd7f234222.png@75q.webp" alt="">
           <div class="d-flex">
             <img src="http://wxb.cmcmall.com.cn/resources/home/home-bk-2d394c6039.png@75q.webp" alt="">

           </div>
         </div>
         <div>
            <div class="">
           <img src="http://wxb.cmcmall.com.cn/resources/home/brand-ttl02-34eb4c0af7.png@75q.webp" alt="">
           <div class="d-flex">
             <img src="http://wxb.cmcmall.com.cn/resources/home/home-tc-8ac90c3219.png@75q.webp" alt="">

           </div>
         </div>
         </div>
    </div>
    <div>
      <img src="http://imgstaticcdnjp1.cmcmall.cn/pagedesign/20170717_bd4e89d949dd4552b77ef75e47fd2078.png@75q.webp#cmcmall-2c-pagedesign" alt="" class="w-100" style="border-top:0.1rem solid #f7f7f7">
    </div>
    <div>
      <div class="d-flex items-c p-all f-18 border-b"><i class="iconfont icon-naozhong1" style="color:#f05;font-size:0.24rem"></i><b class="f-1">限时抢购</b></div>
    </div>
      <div class="float" >
        <ul>
          <li v-for="(item,i) in hotlist" :key="i">
             <div style="background:#f099f3;color:#fff;width:0.36rem;height:0.18rem;margin:-0.06rem 0 0 -0.06rem;border-radius:0.05rem;text-align:center" class="f-12 ">热销</div>
             <div class="d-flex ">
               <div  class="f-1 d-flex flex-column jc-c p-l">
                  <img :src="item.picPath" alt="" style="height:0.6rem;width:0.6rem">
                  <div style="background:#f8d0a8;width:0.6rem;height"></div>
                  <TimeDown :endTime='endTime' class="f-12" style="color:#f05;"></TimeDown>
               </div>
               <div>
                 <p >{{item.Drugname}}</p>
                 <p style="border-bottom:1px solid #f05">零售价:￥{{item.price * 2}}</p>
                 <p style="color:#f05">限时价:￥{{item.price}}/盒</p>
                 <p style="border:1px solid #f05;color:#f63030;border-radius:0.05rem;width:0.4rem;text-align:center" class="" @click="$router.push({path:'/detail',query:{kindid:item.kindid}})"> 查看</p>
               </div>
             </div>
          </li>
        </ul>
      </div>
      <div>
        <li v-for="(item,i) in bannerimg" :key="i" >
          <img :src="item.img" alt="" class="w-100 m-t m-b">
        </li>
      </div>
    <div class="home_over">
      <i>已加载全部内容</i>
    </div>
    <div class="home_footer">
      <div class="home-row">
        <div class="home_col">
          <img src="http://h5.cmcmall.com.cn/resources/home/home-authen-b1bffb735c.png@75q.webp" alt="">
          <div class="cir-font">权威认证</div>
        </div>
        <div class="home_col">
          <img src="http://h5.cmcmall.com.cn/resources/home/home-go-414e9624ed.png@75q.webp" alt="">
          <div class="cir-font">及时配送</div>
        </div>
        <div class="home_col">
          <img src="http://h5.cmcmall.com.cn/resources/home/home-pay-1ded94aedf.png@75q.webp" alt="">
          <div class="cir-font">便捷付款</div>
        </div>
        <div class="home_col">
          <img src="http://h5.cmcmall.com.cn/resources/home/home-medicinal-625df9260a.png@75q.webp" alt="">
          <div class="cir-font">万种药品</div>
        </div>
        <div class="home_col">
          <img src="http://h5.cmcmall.com.cn/resources/home/home-service-d6d95040f2.png@75q.webp" alt="">
          <div class="cir-font">专业服务</div>
        </div>
      </div>
      <div class="home-row">
        <div class="home-tc">Copyright © 2015-2017 华药电商</div>
      </div>
    </div>
    <ti-ps v-show="flag1"></ti-ps>
    <vueToTop right=30 bottom=30 top=10 type=10  v-show="flag2" @click.native="toTop"></vueToTop>
  </div>
  </div>
</template>

<script>
// import { getBannerlist } from '@/utils/api'
import { Toast, NoticeBar } from 'vant'
import Vue from 'vue'
import vueToTop from 'vue-totop'
import { kindNav, kindAll, bannerImg } from '@/utils/api'
import TimeDown from '@/components/Times.vue'
Vue.use(NoticeBar)
Vue.use(Toast)
Vue.use(vueToTop)
export default {
  data () {
    return {
      flag: 0,
      navlist: [],
      flag1: false,
      flag2: false,
      hotlist: [],
      bannerimg: [],
      endTime: '2019-12-29 9:51:00',
      swiperOption: {
        autoplay: true,
        pagination: {
          el: '.pagination-home'
        }
      }
    }
  },
  components: {
    TimeDown
  },
  created () {
    kindNav().then(res => {
      this.navlist = res.data
    })
    kindAll().then(res => {
      this.hotlist = res.data[2].data.splice(1, 5)
    })
    bannerImg().then(res => {
      this.bannerimg = res.data
    })
  },
  methods: {
    toTop () {
      document.getElementById('haha').scrollTop = 0
      this.flag2 = true
    },
    er () {
      Toast.fail('关注"华药商城"官方微信公众号,可以使用扫一扫功能')
    },
    to (i) {
      this.flag = i
      if (i === 0) {
        this.$router.push('/home')
      } else if (i === 1) {
        this.$router.push('/kind')
      } else if (i === 2) {
        this.$router.push('/huiyuan')
      } else {
        this.$router.push('/cuxiao')
      }
    }
  },
  mounted () {
    document.getElementById('haha').addEventListener('scroll', () => {
      let top = document.getElementById('haha').scrollTop
      if (top > 400) {
        this.flag2 = true
      } else {
        this.flag2 = false
      }
    })
  }
}
</script>

<style lang="scss" scoped>
body {
  background: rgb(246, 246, 246)
}
.all-header {
  height: 0.44rem;
  position: sticky;
  background: #36bc7c;
  padding: 0.05rem;
  display: flex;
  justify-content: space-around;
  .home-input{
    border-radius: 5rem;
    background: rgba(45,155,102,.8);
    height:0.25rem;
    width:2.47rem;
    // margin: auto 4.15rem auto 1.75rem;
  }
  .home-ion{
    display:block;
    overflow:hidden;
    .home-linkIco{
      font-size:0.2rem;
      transform:translateX(-80px);
      filter: drop-shadow(rgb(255, 255, 255) 80px 0);
    }
  }
}
.all-nav {
  background:rgba(255,255,255,.5);
  position: sticky;
  display: flex;
  font-size: 0.15rem;
  justify-content: space-around;
  font-family: Arial, Helvetica, sans-serif;
  color: #656565;
  li {
    display: flex;
    border-bottom: 0.02rem solid #fff;
    height: 0.4rem;
    align-items: center;
    padding: 0 0.1rem;

  }
  .active {
    border-color: rgb(27, 170, 27);
  }
}
.nav-icon {
  display: flex;
  background: #fff;
  justify-content: space-around;
  padding:0.1rem 0;
  border-bottom: 1px solid #f2f2f2;
  .iconfont{
    color:#fff;
    font-size: .22rem
  }
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i {
      display: block;
    }
  }
}
.div-icon{
  overflow: hidden;
  .home-linkIco{
    font-size:0.4rem;
    transform:translateX(-80px);
    filter: drop-shadow(rgb(255, 255, 255) 80px 0);
  }
  use{
    color:#36bc7c;
    font-size:0.4rem;
  }
  margin-bottom: 0.05rem;
  font-size:0.4rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
}
.div-icon1{background: linear-gradient(-10deg,#7b99f7,#9ac5f5 80%);}
.div-icon2{background: linear-gradient(-10deg,#f4bc4c,#fbe7ab 90%);}
.div-icon3{background: linear-gradient(-10deg,#f56060,#f7a1a1 70%);}
.div-icon4{background: linear-gradient(-10deg,#f85ee6,#f7c0f0 80%);}
.div-icon5{background: linear-gradient(-10deg,#5cc794,#88f2ad 70%);}
.home_footer{
  .home-row{
    display: flex;
    justify-content: space-around;
    padding:0.05rem 0.15rem;
    background: #fff;
    .home_col{
      padding: 0.05rem;
      img{
        flex: 1;
        display: block;
        margin: 0 auto;
        height:0.38rem;
        width:0.38rem;
      }
      .cir-font{
        margin-top:0.05rem;
        font-size: 0.1rem;
        color: #030303;
        text-align: center;
      }
    }
    .home-tc{
      font-size: 0.125rem;
      color: #989898;
      padding: 0.05rem;
    }
  }
  .home-ln{
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
  }
}
.home_over{
  display: flex;
  justify-content: space-around;
  padding: 0.05rem;
  i{
    padding: 0.05rem;
  }
}
.ImgYY{

  img{
    width: 100%
  }
}
.float{
   overflow: auto;
  ul{
  overflow: hidden;
  height: 1.4rem;
  width: 19rem;
  margin-top: 0.05rem;
  }
  li{
    float: left;
    height:1.28rem;
    width:3.2rem;
    box-shadow: 0 0.02rem 0.03rem #ddd;
    border-radius: .1rem;
    padding: .075rem;
    margin: 0 0.05rem
  }
}
</style>
